iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0
Mobile Development

IOS App開發學習日誌系列 第 20

D20 CAShapeLayer&UIBezierPath

  • 分享至 

  • xImage
  •  

今天介紹使用一種叫做UIBezierPath的描繪筆劃路徑工具,其會把該路徑指派給CAShapeLayer來顯示在UIView上,而UIView與Layer之間的觀念大約如下:
UIView必須放在CALayer上,所以當UIView被創建在ViewController上時,同時也會自動建立一個CALayer

首先先初始化一個UIBezierPath,還有一個要來被賦予路徑的CAShapeLayer

let path = UIBezierPath()
let layer = CAShapeLayer()

再來我們要來使用畫筆來畫出線(也就是path),想像畫畫的時候會在想畫的地方先下筆接觸畫紙(還沒有畫的動作),這個動作在UIBezierPath裡面有個函數叫move,他可以帶入一個CGPoint表示下筆的位置,我們這裡假設座標(100,100)

path.move(to: CGPoint(x: 100, y: 100))

再來我們要拖拉畫筆到想要的位置,這樣就能畫出一條直線,拖拉的這個動作使用addLine,這裡假設要把畫筆拖至(100,200)

path.addLine(to: CGPoint(x: 100, y: 200))

到這裡筆畫路線就已經繪製完畢,但是這時候如果run了程式碼會發現什麼都沒有,因為我們繪製完的路線並沒有一個圖層讓他顯示出來,這個時候我們要用之前新增的圖層來存放繪製完成的直線,也就是像這樣,把繪製好的Path指派給Layer的Path,且Layer要的Path是CGPath的型態所以我們需要轉換

再來我們要改變圖層畫筆畫出來的顏色,因為預設是透明,所以就算畫完了也看不到,這個顏色屬性叫做strokeColor,這邊假設給紅色但是跟上面的Path一樣,Layer的顏色要求的是CGColor我們這邊也要做轉型,給完顏色後就可以把這個Layer加入到主畫面的ViewController上的View

layer.path = path.cgPath
layer.strokeColor = UIColor.red.cgColor
self.view.layer.addSublayer(layer)

接著介紹如何畫圓:
我們先宣告一個點當作圓心,緊接著呼叫畫圓的方法addArc,半徑先設為50,然後因為圓是一個有面積的圖形,所以我們要給他中間填滿的顏色,在Layer裡面的方法叫做fillColor,給定顏色的方式跟上面畫筆顏色也是一樣的,完成後程式碼如下

let layer = CAShapeLayer()
let path = UIBezierPath()
let center = CGPoint(x: 100, y: 100)
path.move(to: CGPoint(x: 100, y: 100))
path.addArc(withCenter: center, radius: 50, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
layer.path = path.cgPath
layer.strokeColor = UIColor.red.cgColor
layer.fillColor = UIColor.red.cgColor
self.view.layer.addSublayer(layer)

addArc()

  • withCenter:圓心
  • radius:半徑
  • startAngle:開始角度(徑度)
  • endAngle:結束角度(徑度)
  • clockwise:順時針或逆時針畫圓(true為順false為逆)

上一篇
DAY19 UserDefaults
下一篇
D21 CocoaPods
系列文
IOS App開發學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言